*{
    /*清零浏览器默认样式*/
    margin: 0;
    padding: 0;
    /*设置盒子模型为border-box*/
    box-sizing: border-box;
}
/*设置body样式*/
body{
    /*设置布局样式flex*/
    display: flex;
    /*设置内容居中*/
    justify-content: center;
    /*设置垂直居中*/ 
    align-items: center;
    /*设置最小高度为100vh*/
    min-height: 100vh;
    /*设置背景颜色*/
    background-color: #0f95ee;
}
/*设置.tabs样式*/
.tabs input{
    /*设置单选框可见性*/
    visibility: hidden;
    /*隐藏单选框*/
    display: none;
}
.buttons{
    /*设置定位样式，相对定位*/
    position:relative;
    /*设置布局样式flex*/
    display: flex;
    /*设置间距80px*/
    gap:80px;
    /*设置内边距上下30px，左右40px*/
    padding: 30px 40px;
    /*设置下边框样式 1px 宽 实线 颜色为rgba(255,255,255,0.2)*/
    border-bottom: 1px solid rgba(255,255,255,0.2);
    /*设置背景颜色*/
    background: #496a81;
    /*设置溢出效果，hidden为修剪不可见*/
    overflow: hidden;
    /*设置边框圆角*/
    border-radius: 20px;
}
.buttons label{
    /*设置宽度，为父容器的20%*/
    width: 20%;
    /*设置大小，1.75倍标准大小*/
    font-size: 1.75em;
    /*设置图标样式，增加1px白色的边框*/
    -webkit-text-stroke: 1px #fff;
    /*设置颜色为transparent 透明*/
    color:transparent;
    /*设置透明度为0.3*/
    opacity: 0.3;
    /*设置光标样式为手型*/
    cursor:pointer;
    /*设置过渡效果，0.5秒*/
    transition: 0.5s;
}
/*设置悬停在按钮时的样式，用到了伪类:hover*/
.buttons label:hover{
    /*设置透明度为1*/
    opacity: 1;
    /*设置滤镜效果，用drop-shadow设置增加阴影。0 0 10px 白色表示阴影格式*/
    filter:drop-shadow(0 0 10px #fff) drop-shadow(0 0 20px #fff);
}
/*设置单选框选中时的样式，用到了伪类:checked*/
/*解释下选择器的写法，.tabs input表示类tabs下面的input。*/
/*由于是同一组，可以通过:nth-child(n)来选择第n个input*/
/*这里的n表示第几个，从1开始*/
/*~表示后面的元素，这里是.buttons label。a~b中的波浪线表示a之后出现的所有b*/
.tabs input:nth-child(1):checked ~ .buttons label:nth-child(1),
.tabs input:nth-child(2):checked ~ .buttons label:nth-child(2),
.tabs input:nth-child(3):checked ~ .buttons label:nth-child(3),
.tabs input:nth-child(4):checked ~ .buttons label:nth-child(4),
.tabs input:nth-child(5):checked ~ .buttons label:nth-child(5)
{
    /*设置透明度为1*/
    opacity: 1;
    /*设置颜色为白色*/
    color: #fff;
    /*设置滤镜效果，用drop-shadow设置增加阴影。0 0 10px 白色表示阴影格式*/
    filter:drop-shadow(0 0 10px #fff) drop-shadow(0 0 20px #fff);
}
/*设置下划线的样式*/
.underline
{
    /*设置定位样式，相对定位*/
    position: absolute;
    /*距离左边的距离为0*/
    left:0;
    /*距离底部的距离为0*/
    bottom:0;
    /*设置宽度为20%*/
    width: 20%;
    /*设置高度为5px*/
    height: 5px;
    /*设置过渡效果，0.5秒*/
    transition: 0.5s;
}
/*设置下划线的样式，用before和aflter创建伪元素，通过content属性添加修饰性内容*/
/*在每个underline的前面添加一个伪元素*/
.underline::before
{
    /*修饰内容设置为空*/
    content: '';
    /*设置定位样式，绝对定位*/
    position:absolute;
    /*距离左边50%*/
    left: 50%;
    /*设置变形样式，平移X轴-50%*/
    transform: translateX(-50%);
    /*设置宽度为40px*/
    width: 40px;
    /*设置高度为100%*/
    height: 100%;
    /*设置背景颜色白色*/
    background-color: #fff;
    /*设置边框圆角 4px*/
    border-radius: 4px;
    /*设置滤镜效果，用drop-shadow设置增加阴影。0 0 10px 白色表示阴影格式*/
    filter:drop-shadow(0 0 10px #fff) drop-shadow(0 0 20px #fff) drop-shadow(0 0 30px #fff) drop-shadow(0 0 50px #fff);
}
/*设置下划线的样式，用before和aflter创建伪元素，通过content属性添加修饰性内容*/
/*在每个underline的前面添加一个伪元素*/
.underline::after
{
    /*修饰内容设置为空*/
    content: '';
    /*设置定位样式，绝对定位*/
    position:absolute;
    /*距离左边50%*/
    left: 50%;
    /*设置变形样式，平移X轴-50%*/
    transform: translateX(-50%);
    /*设置宽度为40px*/
    width: 40px;
    /*设置高度为100%*/
    height: 100%;
    /*设置背景颜色白色*/
    background-color: #fff;
    /*设置边框圆角 4px*/
    border-radius: 4px;
    /*设置滤镜效果，用drop-shadow设置增加阴影。0 0 10px 白色表示阴影格式*/
    filter:drop-shadow(0 0 10px #fff) drop-shadow(0 0 20px #fff)
     drop-shadow(0 0 30px #fff) drop-shadow(0 0 50px #fff) blur(5px);
}
/*以下为通过设置距离左边的距离，来控制下划线在选择不同按钮时的位置*/
.tabs input:nth-child(1):checked ~ .buttons .underline
{
    left:0;
}
.tabs input:nth-child(2):checked ~ .buttons .underline
{
    left:20%;
}
.tabs input:nth-child(3):checked ~ .buttons .underline
{
    left:40%;
}
.tabs input:nth-child(4):checked ~ .buttons .underline
{
    left:60%;
}
.tabs input:nth-child(5):checked ~ .buttons .underline
{
    left:80%;
}